<template>
  <div class="alarm-scroll-table">
    <!-- 表头部分 -->
    <div class="table-header">
      <div class="header-time">时间</div>
      <div class="header-title">运维单号</div>
      <div class="header-status">动态</div>
    </div>

    <!-- 表格内容部分 - 添加拖拽事件 -->
    <div
      ref="chart"
      style="width: 100%; height: calc(250px - 40px)"
      @mousedown="startDrag"
      @mousemove="handleDrag"
      @mouseup="endDrag"
      @mouseleave="endDrag"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ScrollTable",
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    scrollSpeed: {
      type: Number,
      default: 0.5
    },
    rowHeight: {
      type: Number,
      default: 36
    },
    headerHeight: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      chart: null,
      timer: null,
      scrollPosition: 0,
      isDragging: false,
      startDragY: 0,
      lastScrollPosition: 0
    };
  },
  mounted() {
    this.initChart();
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.updateChart();
      window.addEventListener("resize", this.handleResize);
    },
    updateChart() {
      if (!this.chart) return;

      const contentHeight = 250 - this.headerHeight;
      const visibleRowCount = Math.ceil(contentHeight / this.rowHeight);

      const option = {
        backgroundColor: "transparent",
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%",
          containLabel: true
        },
        xAxis: { show: false },
        yAxis: { show: false },
        series: [
          {
            type: "custom",
            renderItem: (params, api) => {
              const dataIndex = api.value(0);
              if (dataIndex >= this.tableData.length || dataIndex < 0) return;

              const item = this.tableData[dataIndex];
              const rowTop = params.coordSys.y + (dataIndex * this.rowHeight) - this.scrollPosition;

              return {
                type: "group",
                children: [
                  // 行背景
                  {
                    type: "rect",
                    shape: {
                      x: params.coordSys.x,
                      y: rowTop,
                      width: params.coordSys.width,
                      height: this.rowHeight
                    },
                    style: {
                      fill: dataIndex % 2 === 0 ? "rgba(10, 30, 50, 0.3)" : "rgba(10, 30, 50, 0.1)"
                    }
                  },
                  // 时间列 - 居中对齐
                  {
                    type: "text",
                    style: {
                      text: item.time,
                      x: params.coordSys.x + 50, // 调整列宽
                      y: rowTop + this.rowHeight / 2,
                      fill: "#fff",
                      fontSize: 15,
                      align: "center"
                    }
                  },
                  // 告警内容 - 居中对齐
                  {
                    type: "text",
                    style: {
                      text: item.title,
                      x: params.coordSys.x + params.coordSys.width / 2  +20,
                      y: rowTop + this.rowHeight / 2,
                      fill: "#fff",
                      fontSize: 15,
                      width: params.coordSys.width - 200,
                      overflow: "truncate",
                      ellipsis: "...",
                      align: "center"
                    }
                  },
                  // 状态 - 居中对齐
                  {
                    type: "text",
                    style: {
                      text: item.status,
                      x: params.coordSys.x + params.coordSys.width - 40,
                      y: rowTop + this.rowHeight / 2,
                      fill: item.status === "待确认" ? "#ff4d4f" : "#52c41a",
                      fontSize: 15,
                      align: "center"
                    }
                  }
                ]
              };
            },
            data: Array.from({ length: this.tableData.length }, (_, i) => i),
            animation: false
          }
        ]
      };

      this.chart.setOption(option);
    },
    // 拖拽相关方法
    startDrag(event) {
      this.isDragging = true;
      this.startDragY = event.clientY;
      this.lastScrollPosition = this.scrollPosition;
      this.stopAutoScroll();
      this.$refs.chart.style.cursor = "grabbing";
    },
    handleDrag(event) {
      if (!this.isDragging) return;

      const deltaY = event.clientY - this.startDragY;
      this.scrollPosition = this.lastScrollPosition - deltaY;

      // 限制滚动范围
      const maxScroll = 0;
      const minScroll = Math.max(
        (this.tableData.length * this.rowHeight) - (250 - this.headerHeight),
        0
      );

      this.scrollPosition = Math.min(maxScroll, Math.max(-minScroll, this.scrollPosition));

      this.updateChart();
    },
    endDrag() {
      if (!this.isDragging) return;

      this.isDragging = false;
      this.$refs.chart.style.cursor = "grab";
      // 拖拽结束后可以重新开启自动滚动
      // this.startAutoScroll();
    },
    startAutoScroll() {
      this.stopAutoScroll();
      this.timer = setInterval(() => {
        if (!this.isDragging) {
          this.scrollPosition += this.scrollSpeed;
          const maxScroll = Math.max(
            (this.tableData.length * this.rowHeight) - (250 - this.headerHeight),
            0
          );

          if (this.scrollPosition > maxScroll) {
            this.scrollPosition = 0;
          }
          this.updateChart();
        }
      }, 50);
    },
    stopAutoScroll() {
      if (this.timer) clearInterval(this.timer);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
        this.updateChart();
      }
    }
  },
  watch: {
    tableData() {
      this.updateChart();
    }
  }
};
</script>

<style scoped>
.alarm-scroll-table {
  width: 100%;
  height: 260px;
  overflow: hidden;
  position: relative;
  border: 1px solid #304156;
  border-radius: 4px;
}

.table-header {
  display: flex;
  height: 40px;
  background-color: rgba(0, 24, 51, 0.8);
  color: #fff;
  font-weight: bold;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-time {
  width: 100px;
  text-align: left;
  margin-left: 14%;
}

.header-title {
  flex: 1;
  text-align: center;
   margin-left: -7%;
}

.header-status {
  width: 40px;
  text-align: right;
  margin-right: 5%;
}

/* 拖拽光标样式 */
.echarts-container {
  cursor: grab;
}

.echarts-container:active {
  cursor: grabbing;
}
</style>
